
arya-typography refers to the art and technique of arranging typefaces (fonts) in a visually appealing and effective manner. It involves the design, selection, and arrangement of various elements such as typefaces, letterforms, line spacing, line length, and other typographic elements to create visually appealing and readable text.
arya-typography: { "default-types-desktop": { "blockquote": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "21", "type": "px" } }, "button-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "24", "type": "px" } }, "button-medium": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "21", "type": "px" } }, "button-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "copy-large": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "22", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "34", "type": "px" } }, "copy-regular": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "30", "type": "px" } }, "copy-small": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "24", "type": "px" } }, "fine-print": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "12", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "16", "type": "px" } }, "heading-hero": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "80", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "104", "type": "px" } }, "heading-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "50", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "65", "type": "px" } }, "heading-medium": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "38", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "57", "type": "px" } }, "heading-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "24", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "31", "type": "px" } }, "heading-tiny": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "20", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "26", "type": "px" } }, "label-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "label-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "12", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "16", "type": "px" } }, "link": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "source-code": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "30", "type": "px" } } }, "default-types-mobile": { "blockquote": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "21", "type": "px" } }, "button-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "24", "type": "px" } }, "button-medium": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "21", "type": "px" } }, "button-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "copy-large": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "28", "type": "px" } }, "copy-regular": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "24", "type": "px" } }, "copy-small": { "font-family": { "value": "ftd#font-copy", "type": "reference" }, "size": { "value": "12", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "16", "type": "px" } }, "fine-print": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "12", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "16", "type": "px" } }, "heading-hero": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "48", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "64", "type": "px" } }, "heading-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "36", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "54", "type": "px" } }, "heading-medium": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "26", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "40", "type": "px" } }, "heading-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "22", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "29", "type": "px" } }, "heading-tiny": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "18", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "24", "type": "px" } }, "label-large": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "label-small": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "12", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "16", "type": "px" } }, "link": { "font-family": { "value": "ftd#font-display", "type": "reference" }, "size": { "value": "14", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "19", "type": "px" } }, "source-code": { "font-family": { "value": "ftd#font-code", "type": "reference" }, "size": { "value": "16", "type": "px" }, "letter-spacing": null, "weight": { "value": "400", "type": "integer" }, "line-height": { "value": "21", "type": "px" } } } }
To start, you can choose from existing typography packages or create your own custom typography. To apply a typography package on top of your package, you’ll need to import it into one of the module.
For example, let’s say you’re using the page component from doc-site package and want to apply the arya-typography package on top of it.
arya-typography into your fastn web project, add below into FASTN.ftd file:-- fastn.dependency: fastn-community.github.io/arya-typography
Option 1: for documentation templates like doc-site
To add typography to your fastn web sites. Edit yourFASTN.ftd file and add arya-typography dependency into it.-- fastn.dependency: fastn-community.github.io/arya-typography
Now modify FASTN/ds.ftd module which is already added inside your fastn package.
arya-typography dependency into FASTN/ds.ftd-- import: fastn-community.github.io/arya-typography
Change -- component page typography property ftd.type-data typography: $roboto-typography.types with ftd.type-data typography: $arya-typography.types
FASTN/ds.ftd file:-- ftd.type-data typography: $roboto-typography.types
-- ftd.type-data typography: $arya-typography.types
arya-typography applied to your pages.arya-typography inside your ftd file-- import: fastn-community.github.io/arya-typography
$arya-typography.types to your component, as shown in below example:ftd file, then deploy and test-- example: This is example of types used from `arya-typography` -- component example: caption title: ftd.type-data types: $arya-typography.types -- ftd.text: $example.title role: $inherited.types.heading-hero color: $inherited.colors.text -- end: example
arya-typography applied to your pages.